<template>
  <div class="box">
    <div class="lampData">
      <div class="item">
        <img
          style="width: 60px; height: 60px; margin-right: 20px"
          src="@/assets/image/10.png"
          alt=""
        />
        <div style="width: 60%">
          <div class="title-name">护眼南灯</div>
          <div style="margin-top: 12px">
            <el-switch
              v-model="lampNan1"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
        </div>
      </div>
      <div class="item">
        <img
          style="width: 60px; height: 60px; margin-right: 20px"
          src="@/assets/image/10.png"
          alt=""
        />
        <div style="width: 60%">
          <div class="title-name">护眼北灯</div>
          <div style="margin-top: 12px">
            <el-switch
              v-model="lampNan2"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
        </div>
      </div>
      <div class="item">
        <img
          style="width: 60px; height: 60px; margin-right: 20px"
          src="@/assets/image/5.png"
          alt=""
        />
        <div style="width: 60%">
          <div class="title-name">筒灯南</div>
          <div style="margin-top: 12px">
            <el-switch
              v-model="lampNan3"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
        </div>
      </div>
      <div class="item">
        <img
          style="width: 60px; height: 60px; margin-right: 20px"
          src="@/assets/image/5.png"
          alt=""
        />
        <div style="width: 60%">
          <div class="title-name">筒灯北</div>
          <div style="margin-top: 12px">
            <el-switch
              v-model="lampNan4"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
        </div>
      </div>
      <div class="item">
        <img
          style="width: 60px; height: 60px; margin-right: 20px"
          src="@/assets/image/13.png"
          alt=""
        />
        <div style="width: 60%">
          <div class="title-name">北墙电视</div>
          <div style="margin-top: 12px">
            <el-switch
              v-model="lampNan5"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
        </div>
      </div>
      <div class="item">
        <img
          style="width: 60px; height: 60px; margin-right: 20px"
          src="@/assets/image/4.png"
          alt=""
        />
        <div style="width: 60%">
          <div class="title-name">东墙LED</div>
          <div style="margin-top: 12px">
            <el-switch
              v-model="lampNan6"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "lampData",
  data() {
    return {
      lampNan1: "",
      lampNan2: "",
      lampNan3: "",
      lampNan4: "",
      lampNan5: "",
      lampNan6: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .title-name {
    color: #ffffff;
  }
  .lampData {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;

    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 49%; // 调整宽度以适应间隔
      height: 145px;
      margin-right: 10px; // 设置间隔
      margin-bottom: 10px; // 设置间隔
      padding: 2rem;
      border-radius: 1rem;
      background: rgba(255, 255, 255, 0.2);
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(20px);

      &:nth-child(2n) {
        margin-right: 0 !important;
      }
    }
  }
}
</style>
